<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= themeConfig.siteName %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css">
    <link rel="stylesheet" href="<%=site.customConfig['route']%>media/css/post.css">
    <link rel="stylesheet" href="<%=site.customConfig['route']%>media/live2d/css/live2d.css" />
    <%if(site.customConfig['tajs']){%>
    <script type="text/javascript" src="<%=site.customConfig['tajs']%>" charset="UTF-8"></script>
    <%}%>
</head>
<body class=" mdui-appbar-with-toolbar  mdui-theme-primary-pink mdui-theme-accent-pink">
<%- include('./includes/header') %>
<%- include('./includes/header-post') %>
<div id="content" class="site-content">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <article id="post-1270" class="post-1270 post type-post status-publish format-standard hentry category-90 category-129 tag-149">
                <header class="entry-header">
                    <h1 class="entry-title"><%= post.title %></h1>
                    <p class="entry-census">发布于 <%= post.dateFormat %></p>
                    <hr>
                </header>
                <div class="neko">
                    <%- post.content%>
                </div>
            </article>
        </main>
    </div>
    <div class="doc-footer-nav mdui-color-theme">
        <div class="mdui-container">
            <div class="mdui-row">
                <% if (post.prevPost && !post.hideInList) { %>
                <a href="<%= post.prevPost.link %>" class="mdui-ripple mdui-color-theme mdui-col-xs-2 mdui-col-sm-6 doc-footer-nav-left">
                    <div class="doc-footer-nav-text">
                        <i class="mdui-icon material-icons">arrow_back</i>
                        <span class="doc-footer-nav-direction mdui-hidden-xs-down">上一篇文章</span>
                        <div class="doc-footer-nav-chapter mdui-hidden-xs-down"><%= post.prevPost.title %></div>
                    </div>
                </a>
                <%}else{%>
                <div class="mdui-col-xs-2 mdui-col-sm-6 doc-footer-nav-left"></div>
                <%}%>
                <% if (post.nextPost && !post.hideInList) { %>
                <a href="<%= post.nextPost.link %>" class="mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 doc-footer-nav-right">
                    <div class="doc-footer-nav-text">
                        <i class="mdui-icon material-icons">arrow_forward</i>
                        <span class="doc-footer-nav-direction">下一篇文章</span>
                        <div class="doc-footer-nav-chapter"><%= post.nextPost.title%></div>
                    </div>
                </a>
                <%}else{%>
                <div class="mdui-col-xs-2 mdui-col-sm-6 doc-footer-nav-left"></div>
                <%}%>
            </div>
        </div>
    </div>
    <br>
    <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
        <% if (commentSetting.commentPlatform === 'gitalk') { %>
            <%- include('./includes/gitalk') %>
        <% } %>

        <% if (commentSetting.commentPlatform === 'disqus') { %>
            <%- include('./includes/disqus') %>
        <% } %>
    <% } %>
    <% if(site.customConfig['is_comment']){%>
    <div id="vue_app">
        <!--头像-->
        <div class="mdui-card">
            <!-- 卡片头部，包含头像、标题、副标题 -->
            <div class="mdui-card-header">
                <img style="cursor:pointer" @click="avatarOpen" class="mdui-card-header-avatar" :src="avatar"/>
                <div class="mdui-card-header-title">评论列表</div>
                <div class="mdui-card-header-subtitle"><-点击图标可以更换头像哦！！~~</div>
            </div>
        </div>
        <br/>

        <!--发表评论框-->
        <reply @submit="replySubmit"></reply>

        <!--评论列表-->
        <div v-for="(v,k) in list">
            <br>
            <div class="mdui-card">
                <!-- 卡片头部，包含头像、标题、副标题 -->
                <div class="mdui-card-header">
                    <img class="mdui-card-header-avatar" :src="v.attributes.img"/>
                    <div v-if="v.attributes.website" class="mdui-text-color-theme mdui-card-header-title mdui-typo">
                        <a target="view_window" :href="v.attributes.website">{{v.attributes.nickname}}</a>
                        <span v-if="v.attributes.is_author" class="mdui-text-color-theme">（博主）</span>
                    </div>
                    <div v-else class="mdui-card-header-title">
                        <span>{{v.attributes.nickname}}</span>
                        <span v-if="v.attributes.is_author" class="mdui-text-color-theme">（博主）</span>
                    </div>
                    <div class="mdui-card-header-subtitle">{{time_format("Y年m月d日 H点s分",v.attributes.time)}}</div>
                </div>

                <!-- 卡片的内容 -->
                <div class="mdui-card-content" v-html="v.attributes.txt"></div>

                <div>
                    <ul class="mdui-list" v-for="vv in JSON.parse(v.attributes.reply_son)">
                        <li class="mdui-list-item">
                            <div class="mdui-list-item-avatar"><img :src="vv.img"/></div>
                            <div class="mdui-list-item-content"  style="height: auto">
                                <div v-if="vv.website" class="mdui-list-item-title mdui-typo">
                                    <a target="view_window" :href="vv.website" class="mdui-text-color-theme">{{vv.nickname}}</a>
                                    <span v-if="vv.is_author" class="mdui-text-color-theme">（博主）</span>
                                    <span class="mdui-typo-caption-opacity">{{time_format("Y年m月d日 H点s分",vv.time)}}</span>
                                </div>
                                <div v-else class="mdui-list-item-title">
                                    {{vv.nickname}}
                                    <span v-if="vv.is_author" class="mdui-text-color-theme">（博主）</span>
                                    <span class="mdui-typo-caption-opacity">{{time_format("Y年m月d日 H点s分",vv.time)}}</span>
                                </div>
                                <div class="mdui-list-item-text mdui-typo">
                                    <a v-if="vv.reply_website" :href="vv.reply_website" target="view_window" class="mdui-typo">@{{vv.reply_nickname}}</a>
                                    <a v-else class="mdui-typo">@{{vv.reply_nickname}}</a>：
                                    <span class="reply_son" v-html="vv.txt"></span>
                                </div>
                            </div>

                            <div>
                                <button
                                        @click="reply2(k,vv.id,vv.nickname,vv.email,vv.website)"
                                        class="mdui-btn mdui-text-color-pink"
                                >
                                    回复
                                </button>
                            </div>
                        </li>
                        <li class="mdui-divider-inset mdui-m-y-0"></li>
                    </ul>
                </div>

                <div class="mdui-card-actions">
                    <button
                            @click="reply2(k,v.id,v.attributes.nickname,v.attributes.email,v.attributes.website)"
                            style="float:right "
                            class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent"
                    >
                        回复
                    </button>
                </div>
            </div>
        </div>
        <br/>
        <div style="text-align:center" v-if="list.length!=0">
            <button @click="loadMore" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">加载更多</button>
        </div>

        <!--回复的弹窗-->
        <div class="mdui-dialog" id="reply_mode">
            <div class="mdui-dialog-title">
                <span>回复</span>
                <span class="mdui-text-color-theme">@{{replyList.nickname}}</span>
                <span style="float:right ">
                    <button class="mdui-btn"  @click="reply2Close">取消回复</button>
                </span>
            </div>
            <reply @submit="reply2Submit"/>
        </div>

        <!--选头像的弹窗-->
        <div class="mdui-dialog" id="avatar_mode">
            <div class="mdui-dialog-title">
                选择头像
                <span style="float:right ">
                    <button class="mdui-btn"  @click="avatarClose">取消选择</button>
                </span>
            </div>
            <avatar @choice="avatarChoice"></avatar>
        </div>
    </div>
    <object data="/media/js/modular/reply/reply.html" width="0" height="0" id="reply_object"></object>
    <object data="/media/js/modular/emoji/emoji.html" width="0" height="0" id="emoji_object"></object>
    <object data="/media/js/modular/avatar/avatar.html" width="0" height="0" id="avatar_object"></object>
    <%}%>
</div>
<%- include('./includes/footer') %>
</body>
<script src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
<script src="/media/layer/layer.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.11.1/dist/av-min.js"></script>
<script src="//unpkg.com/vue@next"></script>
<script>
    <% if(site.customConfig['is_comment']){%>
    //初始化leancloud的SDK
    AV.init({
        appId: "<%=site.customConfig['app_id']%>",
        appKey: "<%=site.customConfig['app_key']%>",
        serverURL: "<%=site.customConfig['rest_api']%>"
    });
    <%}%>
</script>
<script type="module" src="/media/js/post.js"></script>
</html>
